<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>在线聊天室</title>

    {include file="base_mui/chat_room"/}
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>

    <![endif]-->
</head>
<body id="webim" >

    <div class="col-xs-12 " style="padding-left: 0px;padding-right: 0px">
        <div class="panel panel-info">
            <!--<div class="panel-heading" style="text-align: center">-->
               <!--YZF聊天室-->
            <!--</div>-->
            <div class="panel-body no-padding">
                <div class="col-xs-2 user-list">

                </div>
                <div class="col-xs-10 no-padding">
                    <div class="chat-list">
                    </div>

                </div>

            </div>
            <div class="message" >
                <div class="text" style="border: 1px solid black">
                    <textarea></textarea>
                </div>
                <div class="send">
                    发送
                </div>
            </div>
        </div>
    </div>

<script>
    var uuid = "{$open_id}";
    $(function() {
        webim.init();

        $(".message .send").click(function(){
            webim.sendMsg();
        });
    });

    var config = {
        server : '{$server}'
    };

    var webim = {
        data : {
            wsServer : null,
            info : {}
        },
        init : function() {
            this.data.wsServer = new WebSocket(config.server);
            this.open();
            this.close();
            this.messages();
            this.error();
        },
        open : function() {
            this.data.wsServer.onopen = function(evt) {
                webim.notice('连接成功');
                webim.data.wsServer.send(webim.toJson("login",uuid));
            }
        },
        close : function() {
            this.data.wsServer.onclose = function(evt) {
                webim.notice('不妙，链接断开了');
            }
        },
        messages : function() {
            this.data.wsServer.onmessage = function (evt) {
                var data = jQuery.parseJSON(evt.data);
                switch (data.type) {

                    case 'open':
                        webim.appendUser(data.user.name, data.user.avatar, data.user.fd);
                        webim.notice(data.message);
                        console.log(data);
                        break;
                    case 'close':
                        webim.removeUser(data.user.fd);
                        webim.notice(data.message);
                        console.log(data);
                        break;
                    case 'openSuccess':
                        webim.data.info = data.user;
                        webim.showAllUser(data.all);
                        console.log(data);
                        break;
                    case 'message':
                        webim.newMessage(data);
                        console.log(data);
                        break;
                }
            };
        },
        error : function() {
            this.data.wsServer.onerror = function (evt, e) {
                console.log('Error occured: ' + evt.data);
            };
        },
        removeUser: function(fd) {
            $(".fd-"+fd).remove();
        },
        showAllUser: function(users) {
            for (i in users) {
                this.appendUser(users[i].name, users[i].avatar, users[i].fd);
            }
        },
        toJson:function (type,msg) {
            var data={
                "type":type,
                "message":msg,
            }
            console.log(JSON.stringify(data));
            return JSON.stringify(data);
        },
        sendMsg : function() {

            var text = $(".message .text textarea");
            var msg = text.val();
            if ($.trim(msg) == '') {
                this.layerErrorMsg('请输入消息内容');
                return false;
            }

            this.data.wsServer.send(this.toJson("message",msg));

            var html = '<div class="col-xs-10 msg-item ">'
                    +'<div class="col-xs-1 no-padding pull-right">'
                    +'<div class="avatar">'
                         +'<img src="'+this.data.info.avatar+'" width="50" height="50" class="img-circle">'
                    +'</div>'
                    +'</div>'

                    +'<div class="col-xs-11" style="padding-right: 0px;padding-left: 0">'
                    +'<div class="col-xs-12" style="padding-right: 0px;padding-left: 0">'
                    +'<div class="username pull-right">'+this.data.info.name+'</div>'
                    +'<div>'
                    +'<div class="col-xs-12 no-padding" style="padding-left: 50px">'
                    +'<div class="msg pull-right">'+msg+'</div>'
                    +'</div>'
                    +'</div>';

            $('.chat-list').append(html);

            this.appendUser(this.data.info.name, this.data.info.avatr, this.data.info.fd);
            this.scrollBottom();

            text.val('');
        },
        newMessage : function(data) {
            this.appendUser(data.user.name, data.user.avatar, data.user.fd);
            var html = '<div class="col-xs-10 msg-item ">'
                    +'<div class="col-xs-1 no-padding">'
                    +'<div class="avatar">'

                         +'<img src="'+data.user.avatar+'" width="50" height="50" class="img-circle">'
                    +'</div>'
                    +'</div>'

                    +'<div class="col-xs-11 no-padding">'
                    +'<div class="col-xs-12">'
                    +'<div class="username">'+data.user.name+'</div>'
                    +'</div>'
                    +'<div class="col-xs-12 no-padding">'
                    +'<div class="msg">'+data.message+'</div>'
                    +'</div>'
                    +'</div>'
                    +'</div>';

            $('.chat-list').append(html);
            this.scrollBottom();
        },
        scrollBottom : function() {
            $('.chat-list').scrollTop($('.chat-list')[0].scrollHeight );
        },
        notice : function(msg) {
            var html ='<div class="col-xs-12 notice text-center">'+msg+'</div>';
            $('.chat-list').append(html);

            this.scrollBottom();
        },
        appendUser : function(name, avatar, fd) {
            if ($(".fd-"+fd).length > 0) {
                return true;
            }
            var html = ' <div class="user-item fd-'+fd+'">'
                    +'<div class="avatar">'

                         +'<img src="'+avatar+'" width="50" height="50" class="img-circle">'
                    +'</div>'
                    +'<div class="user-name">'+name+'</div>'
                    +'</div>';

            $(".user-list").append(html);
            $('.user-list').scrollTop($('.user-list')[0].scrollHeight );
        },
        layerSuccessMsg : function(msg) {
            layer.msg(msg, {time: 1000, icon:6});
        },
        layerErrorMsg : function(msg) {
            layer.msg(msg, {time: 1000, icon:5});
        }
    };

    var html = document.querySelector('html');
    var rem = html.offsetWidth / 7.2;
    html.style.fontSize = rem + "px";

</script>
</body>
</html>